<template>
  <el-aside id="asideNav" :width="collapse ? 'auto' : '180px'">
    <div class="logo-name">
      <p>{{ collapse ? '后台' : '校企合作平台' }}</p>
    </div>

    <el-menu :default-active="currentActive()" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
      :router="true" :collapse="collapse" :unique-opened="true" :collapse-transition="false">
 
      <el-menu-item index="/user/list">
        <el-icon>
          <User />
        </el-icon>
        <span>员工管理</span>
      </el-menu-item>

      <el-menu-item index="/engineer/list">
        <el-icon>
          <Grid/>
        </el-icon>
        <span>工程师管理</span>
      </el-menu-item>

      <el-menu-item index="/resourceType/list">
        <el-icon>
          <Grid />
        </el-icon>
        <span>分类管理</span>
      </el-menu-item>

      <el-menu-item index="/resource/list">
        <el-icon>
          <Box />
        </el-icon>
        <span>资源管理</span>
      </el-menu-item>

      <el-menu-item index="/school/list">
        <el-icon>
          <Box />
        </el-icon>
        <span>学校中心</span>
      </el-menu-item>

      <el-menu-item index="/course/list">
        <el-icon>
          <Food />
        </el-icon>
        <span>课程管理</span>
      </el-menu-item>

      <el-menu-item index="/project/list">
        <el-icon>
          <Food />
        </el-icon>
        <span>项目管理</span>
      </el-menu-item>


      <el-menu-item index="/feedback/list">
        <el-icon>
          <setting />
        </el-icon>
        <span>工作台</span>
      </el-menu-item>
  
    </el-menu>
  </el-aside>

</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useRouter, useRoute } from "vue-router";

import { useSystemStore } from '@/stores/system'
const systemStore = useSystemStore();

const { collapse } = storeToRefs(systemStore)


//获取路由对象
const router = useRouter();
const route = useRoute();

const currentActive = () => {
  let path = route.path;
  path = path.substring(0, path.lastIndexOf("/")) + "/list";
  return path;
}

</script>

<style scoped>
#asideNav {
  display: flex;
  flex-direction: column;
}

#asideNav .logo-name {
  width: 100%;
  height: 50px;
  background-color: #545c64;
}

#asideNav .logo-name p {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  margin: 0px;
  color: #fff;
}

#asideNav .el-menu {
  flex: 1;
  border-right: none;
}
</style>